import { Form, Input, Button } from 'antd';
import { connect } from 'umi';
import React, { Component } from 'react';
import styles from './index.less';

class Search extends Component {
  state = {
    initialValues: {
      username: '',
      phone: '',
      mail: '',
    },
  };

  onFinish = (values) => {
    const { dispatch } = this.props;
    if (dispatch) {
      dispatch({
        type: 'systemUser/fetchList',
        payload: { ...values },
      });
    }
  };
  onReset = () => {
    this.form.resetFields();
    const { dispatch } = this.props;
    // console.log(this.form.getFieldValue());
    if (dispatch) {
      dispatch({
        type: 'systemUser/fetchList',
        payload: {},
      });
    }
  };

  render() {
    return (
      <div className={styles.wrap}>
        <Form
          name="basic"
          layout="inline"
          ref={(ref) => (this.form = ref)}
          initialValues={this.state.initialValues}
          onFinish={this.onFinish.bind(this)}
        >
          <Form.Item label="用户名" name="username" className={styles.item_search}>
            <Input autoComplete="off" />
          </Form.Item>

          <Form.Item label="邮箱" name="email" className={styles.item_search}>
            <Input autoComplete="off" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" className={styles.item_submit} htmlType="submit">
              查找
            </Button>
            <Button type="primary" className={styles.item_reset} onClick={this.onReset.bind(this)}>
              重置
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default connect(({ systemUser }) => ({
  systemUser,
}))(Search);
